<template>
  <!-- eld -->
  <el-dialog :title="title"
             :visible.sync="dialogShow"
             width="50%"
             @close="closeDialog">
    <el-form ref="fromRef"
             :model="fromData"
             :rules="fromRules"
             label-width="140px"
             :inline="false"
             size="normal">
      <el-row v-if="menusBtn">
        <el-col :span="24">
          <el-form-item label="菜单类型"
                        prop=""
                        label-width="90px">
            <el-radio-group size="small"
                            v-model="menusShowList">
              <el-radio-button :label="true"> 菜单</el-radio-button>
              <el-radio-button :label="false"> 按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="menusShowList">
        <el-col :span="12">
          <el-form-item label="菜单名称"
                        prop="permission_name"
                        label-width="90px">
            <el-input v-model="fromData.permission_name"
                      placeholder="请输入菜单名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单地址"
                        prop="route"
                        label-width="90px">
            <el-input v-model="fromData.route"
                      placeholder="请输入路由地址，以/开头"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="menusShowList">
        <el-col :span="12">
          <el-form-item label="组件地址"
                        prop="component"
                        label-width="90px">
            <el-input v-model="fromData.component"
                      placeholder="请输入组件路径地址，不以/开头"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识"
                        prop="permission_mark"
                        label-width="90px">
            <el-input v-model="fromData.permission_mark"
                      placeholder="格式：controller@action"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item v-if="!menusShowList"
                        label="权限标识"
                        prop="permission_mark"
                        label-width="90px">
            <el-input v-model="fromData.permission_mark"
                      placeholder="格式：controller@action"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮名称"
                        prop=""
                        label-width="90px"
                        v-show="!menusShowList">
            <el-input v-model="fromData.icon"
                      placeholder="请输入按钮名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="menusShowList">
        <el-col :span="12">
          <el-form-item label="菜单图标"
                        prop="icon"
                        label-width="90px">
            <el-input placeholder="请输入内容"
                      v-model="fromData.icon"
                      prefix-icon="el-icon-search"
                      @focus="show = true" />
            <el-card class="box-card"
                     v-if="show"
                     style="width: 500px">
              <IconSelect style="width: 410px"
                          @selected="selected"></IconSelect>
            </el-card>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Redirect"
                        prop="redirect"
                        label-width="90px">
            <el-input v-model="fromData.redirect"
                      placeholder="请输入Redirect"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否外链"
                        prop="islink"
                        label-width="90px"
                        v-show="menusShowList">
            <el-radio-group v-model="fromData.islink">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序"
                        prop="sort"
                        label-width="90px">
            <el-input-number :step="1"
                             v-model="fromData.sort"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="menusShowList">
        <el-col :span="12">
          <el-form-item label="Hidden"
                        prop="hidden"
                        label-width="90px">
            <el-radio-group v-model="fromData.hidden">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>:
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="KeepAlive"
                        prop="keepalive"
                        label-width="90px">
            <el-radio-group v-model="fromData.keepalive">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer">
      <el-button @click="dialogShow = false"
                 size="mini">取 消</el-button>
      <el-button type="primary"
                 @click.native="btnOk"
                 size="mini">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import IconSelect from "@/components/IconSelect";
import { addMenuListApi, edlMenuListApi } from "@/api/permission/menu";
import { getUserCheckListApi } from "@/api/permission/userinfo";
export default {
  components: { IconSelect },
  name: "addEmployeeps",
  data () {
    return {
      menusBtn: false,
      menusShowList: true,
      show: false,
      
      fromData: {
        component: "",
        hidden: 1,
        icon: "",
        islink: 1,
        keepalive: 1,
        parent_id: 0,
        permission_mark: "",
        permission_name: "",
        redirect: "",
        route: "",
        sort: 10,
        type: 1,
      },
      fromRules: {
        component: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        created_at: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        icon: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        permission_mark: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        redirect: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        permission_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        route: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        islink: [{ required: true, trigger: "blur" }],
        keepalive: [{ required: true, trigger: "blur" }],
        parent_id: [{ required: true, trigger: "blur" }],
        hidden: [{ required: true, trigger: "blur" }],
      },
      // 开关
      dialogShow: false,
    };
  },
  computed: {
    title () {
      return this.fromData.id ? "修改" : "新增";
    },
  },
  methods: {
  
    handleIconClick () { },
    handleSelect () { },
    tabClick () {
      console.log(1);
    },
    selected (name) {
      this.fromData.icon = name;
      this.show = false;
    },
    // 确认提交
    async btnOk () {
      try {
        // 1.表单校验
        await this.$refs.fromRef.validate();
      } catch (error) {
        return console.log(error);
      }
      //   2.整理数据，提交数据
      //   2.1 判断是编辑还是添加
      if (this.fromData.id) {
        // 编辑
        await edlMenuListApi(this.fromData);
        this.$message.success("修改成功");
      } else {
        // 添加
        await addMenuListApi(this.fromData);
        this.$message.success("添加成功");
      }

      // 4.通知列表更新
      this.$emit("updataList");
      // 5.关闭弹框
      this.dialogShow = false;
    },
    // 重置表单，防止遗留问题
    closeDialog () {
      this.$refs.fromRef.resetFields();
      this.menusBtn = false;
      this.fromData = {
        component: "",
        hidden: "",
        icon: "",
        islink: 2,
        keepalive: "",
        parent_id: "",
        permission_mark: "",
        permission_name: "",
        redirect: "",
        route: "",
        sort: 10,
        type: 1,
      };
    },
  },
};
</script>
<style></style>



